font-family¶seletor = tag ou classe ou id
seletor {
propriedade: valor;
}
/* Exemplo utilizando seletor do tipo identificador*/
#ft1 {
font-family: sans-serif;
}
font-family: Indica o nome da fonte a ser utilizada. Arquivo: index.html
<!--Arquivo index.html-->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aula03</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<h1 id="ft1"> A fonte utilizada neste título foi Serif.</h1>
<h1 id="ft2"> A fonte utilizada neste título foi Sans-Serif.</h1>
<h1 id="ft3"> A fonte utilizada neste título foi Monospace.</h1>
<h1 id="ft4"> A fonte utilizada neste título foi Cursive.</h1>
<h1 id="ft5"> A fonte utilizada neste título foi Fantasy.</h1>
</body>
</html>
Arquivo: estilo.css
/* Arquivo estilo.css dentro da pasta css. */
#ft1 {
font-family: serif;
}
#ft2 {
font-family: sans-serif;
}
#ft3 {
font-family: monospace;
}
#ft4 {
font-family: cursive;
}
#ft5 {
font-family: fantasy;
}
Figura 1: Exemplo de uso de família de fontes genéricas
| Fonte: Autoria própria |
font-family: indica o nome da família de fontes a ser utilizada.
src: url(''): indica o local onde a fonte foi armazenada com a sua extensão.
Observação:
Arquivo: index.html
<!--Arquivo index.html-->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aula03</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<h1 id="ft1"> A fonte utilizada neste título foi Serif.</h1>
<h1 id="ft2"> A fonte utilizada neste título foi Sans-Serif.</h1>
<h1 id="ft3"> A fonte utilizada neste título foi Monospace.</h1>
<h1 id="ft4"> A fonte utilizada neste título foi Cursive.</h1>
<h1 id="ft5"> A fonte utilizada neste título foi Fantasy.</h1>
<h1 id="ft6"> A fonte utilizada neste título foi uma WebFont (Pacifico - SIL Open Font License).</h1>
</body>
</html>
Arquivo: estilo.css
/* Arquivo estilo.css dentro da pasta css. */
#ft1 {
font-family: serif;
}
#ft2 {
font-family: sans-serif;
}
#ft3 {
font-family: monospace;
}
#ft4 {
font-family: cursive;
}
#ft5 {
font-family: fantasy;
}
@font-face {
font-family: Pacifico;
src: url(../fontes/pacifico/Pacifico.ttf);
}
#ft6 {
font-family: Pacifico;
}
Figura 2: Exemplo de uso de família de fontes genéricas e webFonts
| Fonte: Autoria própria |
Arquivo: index.html
<!--Arquivo index.html-->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aula03</title>
<link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<h1 id="ft1"> A fonte utilizada neste título foi Serif.</h1>
<h1 id="ft2"> A fonte utilizada neste título foi Sans-Serif.</h1>
<h1 id="ft3"> A fonte utilizada neste título foi Monospace.</h1>
<h1 id="ft4"> A fonte utilizada neste título foi Cursive.</h1>
<h1 id="ft5"> A fonte utilizada neste título foi Fantasy.</h1>
<h1 id="ft6"> A fonte utilizada neste título foi uma WebFont (Pacifico - SIL Open Font License).</h1>
<h1 id="ft7"> A fonte utilizada neste título foi uma Fonte do Google.</h1>
</body>
</html>
Arquivo: estilo.css
/* Arquivo estilo.css dentro da pasta css. */
#ft1 {
font-family: serif;
}
#ft2 {
font-family: sans-serif;
}
#ft3 {
font-family: monospace;
}
#ft4 {
font-family: cursive;
}
#ft5 {
font-family: fantasy;
}
@font-face {
font-family: Pacifico;
src: url(../fontes/pacifico/Pacifico.ttf);
}
#ft6 {
font-family: Pacifico;
}
#ft7 {
font-family: 'Modak', cursive;
}
Figura 3: Exemplo de uso de família de fontes genéricas, webFonts e google fonts
| Fonte: Autoria própria |
font-size-adjust¶p {
font-size: 16px;
font-size-adjust: .5;
}
font-style¶p {
font-style: italic;
}
font-weight¶p {
font-weight: bold;
}
font-variant¶p {
font-variant: small-caps;
}
line-height¶em. p {
line-height: 2em;
}
font¶font: font-style font-variant font-weight font-size/ line-height font-famil; font-size e de font-family são obrigatórios. p {
font: italic bold small-caps 3em/.9 ’Title Font’, Constantia, Georgia, Times, ‘Times New Roman’ ;
}
p {
font-size: 16px;
font-size-adjust: .5;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
line-height: 2em;
}
color (Aula03_FormatacaoCSS-ConceitosBasicos)¶p {
color: rgb(245, 34, 9);
}
text-align¶p {
text-align: right;
}
text-transform¶p {
text-transform: capitalize;
}
text-decoration¶p {
text-decoration: none;
}
text-indent¶p {
text-indent: 10px;
}
text-direction¶p {
text-direction: rtl;
}
text-shadow¶seletor = tag ou classe ou id
seletor {
text-shadow: h-shadow v-shadow blur color;
}
p {
text-shadow: +10px +10px +3px blue;
}
p {
text-shadow: +10px -10px +3px blue;
}
p {
text-shadow: -10px -10px +3px blue;
}
p {
text-shadow: -10px +10px +3px blue;
}
letter-spacing¶em. p {
letter-spacing: 2em;
}
word-spacing¶em. p {
word-spacing: 2em;
}
vertical-align¶p {
vertical-align: middle;
}
white-spacing¶p {
white-spacing: pre-line;
}
ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.